<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--当前页面用chrome内核来渲染。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--在iPhone的浏览器中页面将以原始大小显示，并不允许缩放  -->
    <title>图片加载平移放大缩小示例</title>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .layui-form-select .layui-input{
      background: #031a34;
      border-color: #123776;
      color: #6eadff;
    }

    .layui-form-select .layui-input::-webkit-input-placeholder { /* WebKit browsers */

      　　color:#999;

    }

    .layui-form-select .layui-edge{
      border-top-color: #123776;
    }

  </style>
</head>

<body class="body-bg">
    <div class="layui-row">
        <ul class="layui-nav nav-bg" lay-filter="">
          <li class="layui-nav-item"><a href=""><img src="./images/sun.png" /></a></li>
          <li class="layui-nav-item"><a href="">湖北 &bull; 武汉</a></li>
          <li class="layui-nav-item"><a href="">晴转多云</a></li>
          <li class="layui-nav-item"><a href="">23℃</a></li>
          <li class="layui-nav-item"><a href="">湿度：40%</a></li>
          <!--<li class="layui-nav-item f-r"><a href=""><i class="layui-icon layui-icon-password"></i>  注册</a></li>-->
          <!--<li class="layui-nav-item f-r"><a href="">|</a></li>-->
          <!--<li class="layui-nav-item f-r"><a href=""><i class="layui-icon layui-icon-release"></i>  登录</a></li>-->
        </ul>
        <div class="layui-logo p-a logo-ny"><img src="./images/logo-zhny.png" /></div>
    </div>

    <div class="layui-fluid">
      <div class="layui-row layui-col-space10" >
        <div class="layui-col-lg3 layui-col-md3" >
            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                <!--<span class="f-r c-p">更多信息</span>-->
                <i class="layui-icon layui-icon-next"></i> 追溯企业信息
              </div>
              <div class="layui-card-body">
                <table class="layui-table table-box landforms" >
                  <colgroup>
                    <!-- <col width="150">
                    <col width="200"> -->
                    <col>
                  </colgroup>
                  <!-- <thead>
                    <tr>
                      <th>预警时间</th>
                      <th>设备地点</th>
                      <th>预警原因</th>
                    </tr>
                  </thead> -->
                  <tbody>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-location"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">追溯企业数<br/><em class="fnt-st">45家</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-camera"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">摄像头个数<br/><em class="fnt-st">2000个</em></span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-chart-screen"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">本月数据<br/><em class="fnt-st">山地地貌</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-chart"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">上月环比<br/><em class="fnt-st">99.51m</em></span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-auz"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">不合格数<br/><em class="fnt-st">112.5343°</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-console"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">上月环比<br/><em class="fnt-st">302611°</em></span>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>

            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                  <i class="layui-icon layui-icon-next"></i> 物联网企业信息
              </div>
              <div class="layui-card-body">
                  <table class="layui-table table-box landforms" >
                      <colgroup>
                        <!-- <col width="150">
                        <col width="200"> -->
                        <col>
                      </colgroup>
                      <!-- <thead>
                        <tr>
                          <th>预警时间</th>
                          <th>设备地点</th>
                          <th>预警原因</th>
                        </tr>
                      </thead> -->
                      <tbody>
                        <tr>
                          <td>
                             <span class="layui-col-lg6">
                               <div class="circle t-c">
                                  <i class="layui-icon layui-icon-website"></i>
                               </div>
                             </span>
                             <span class="layui-col-lg6 t-l">物联网企业<br/><em class="fnt-st">45家</em></span>
                            </td>
                          <td>
                            <span class="layui-col-lg6">
                              <div class="circle t-c">
                                  <i class="layui-icon layui-icon-voice"></i>
                               </div>
                            </span>
                            <span class="layui-col-lg6 t-l">传感器数<br/><em class="fnt-st">2000个</em></span>
                          </td>
                        </tr>
                        <tr>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-video"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">摄像头数<br/><em class="fnt-st">1000个</em></span>
                            </td>
                            <td>
                              <span class="layui-col-lg6">
                                <div class="circle t-c">
                                  <i class="layui-icon layui-icon-form"></i>
                               </div>
                              </span>
                              <span class="layui-col-lg6 t-l">本月条数<br/><em class="fnt-st">9951条</em></span>
                            </td>
                          </tr>
                          <!--<tr>-->
                            <!--<td>-->
                              <!--<span class="layui-col-lg6"><img src="./images/lay5.png" /></span>-->
                              <!--<span class="layui-col-lg6 t-l">经度<br/><em class="fnt-st">112.5343°</em></span>-->
                            <!--</td>-->
                            <!--<td>-->
                              <!--<span class="layui-col-lg6"><img src="./images/lay6.png" /></span>-->
                              <!--<span class="layui-col-lg6 t-l">纬度<br/><em class="fnt-st">302611°</em></span>-->
                            <!--</td>-->
                          <!--</tr>-->
                      </tbody>
                    </table>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>
        </div>

        <div class="layui-col-lg6 layui-col-md6" >
            <div class="layui-card layui-card-se card-em">
              <div class="layui-card-header">
                  <!--<span class="f-r c-p">更多视频</span>-->
                  <i class="layui-icon layui-icon-next"></i> 预留div
              </div>
              <div class="layui-card-body">
                <div class="box-center">
                  123123123123123123123123123123123123123123123123123123123123
                </div>
              </div>
            </div>
        </div>

        <div class="layui-col-lg3 layui-col-md3" >
            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                  <!--<span class="f-r c-p">更多视频</span>-->
                <i class="layui-icon layui-icon-next"></i> 武汉菜价数据
              </div>
              <div class="layui-card-body">
                <table class="layui-table table-box landforms" >
                  <colgroup>
                    <!-- <col width="150">
                    <col width="200"> -->
                    <col>
                  </colgroup>
                  <!-- <thead>
                    <tr>
                      <th>预警时间</th>
                      <th>设备地点</th>
                      <th>预警原因</th>
                    </tr>
                  </thead> -->
                  <tbody>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-tree"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">菜价涨幅<br/><em class="fnt-st">45%</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-upload-circle"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">鸡蛋涨幅<br/><em class="fnt-st">20%</em></span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-link"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">猪肉涨幅<br/><em class="fnt-st">15%</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-upload-drag"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">大蒜涨幅<br/><em class="fnt-st">51%</em></span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-rmb"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">生姜涨幅<br/><em class="fnt-st">12%</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-upload"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">马铃薯涨幅<br/><em class="fnt-st">30%</em></span>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>

            <div class="layui-card layui-card-se p-r">
              <div class="layui-card-header">
                <!--<span class="f-r c-p">更多视频</span>-->
                <i class="layui-icon layui-icon-next"></i> 扶贫数据</div>
              <div class="layui-card-body">
                <table class="layui-table table-box landforms" >
                  <colgroup>
                    <!-- <col width="150">
                    <col width="200"> -->
                    <col>
                  </colgroup>
                  <!-- <thead>
                    <tr>
                      <th>预警时间</th>
                      <th>设备地点</th>
                      <th>预警原因</th>
                    </tr>
                  </thead> -->
                  <tbody>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-component"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">扶贫村数<br/><em class="fnt-st">45家</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-home"></i>
                        </div></span>
                      <span class="layui-col-lg6 t-l">扶贫户数<br/><em class="fnt-st">2000户</em></span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-survey"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">同比增长<br/><em class="fnt-st">50%</em></span>
                    </td>
                    <td>
                      <span class="layui-col-lg6">
                        <div class="circle t-c">
                          <i class="layui-icon layui-icon-refresh-1"></i>
                        </div>
                      </span>
                      <span class="layui-col-lg6 t-l">同比增长<br/><em class="fnt-st">91%</em></span>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
              <span class="corner-tl p-a"></span>
              <span class="corner-tr p-a"></span>
              <span class="corner-bl p-a"></span>
              <span class="corner-br p-a"></span>
            </div>
        </div>
    </div>

    <div class="layui-row row-top">
        <div class="layui-card layui-card-se p-r">
          <div class="layui-card-header">

            <div class="layui-row row-line">
              <!--<div class="f-r warn-tip">-->
                <!--<span class="layui-inline"><img src="./images/status1.png" />&nbsp;&nbsp;&nbsp;&nbsp;正常设备</span>-->
                <!--<span class="layui-inline"><img src="./images/status2.png" />&nbsp;&nbsp;&nbsp;&nbsp;设备异常提醒</span>-->
              <!--</div>-->

              <i class="layui-icon layui-icon-next"></i> 传感器实时监测

              <!--<div class="layui-inline">-->
                <!--<form class="layui-form" action="">-->
                  <!--<div class="layui-form-item item-bn">-->
                    <!--<div class="layui-input-block">-->
                      <!--<select name="city" lay-verify="required">-->
                        <!--<option value=""></option>-->
                        <!--<option value="0">大棚A</option>-->
                        <!--<option value="1">大棚B</option>-->
                        <!--<option value="2">大棚C</option>-->
                        <!--<option value="3">大棚D</option>-->
                        <!--<option value="4">大棚E</option>-->
                      <!--</select>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</form>-->
              <!--</div>-->
            </div>

          </div>
          <div class="layui-card-body">

            <div class="layui-container sensor sensor-wt">
              <h3>&nbsp;</h3>
              <div class="layui-row d-if">

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-spread-left"></i>
                  </div>

                   前海数据 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-tips"></i>
                  </div>
                  传感器数据 <br/>
                  <strong class="big-clr">56%RH</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-template-1"></i>
                  </div>
                  检测数据 <br/>
                  <strong class="big-clr">30%RH</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-app"></i>
                  </div>
                  测试数据 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-log"></i>
                  </div>
                  测试数据 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-layouts"></i>
                  </div>
                  测试数据 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>

                <div class="sensor-box t-c text-color">
                  <div class="cg-ico t-c">
                    <i class="layui-icon layui-icon-tabs"></i>
                  </div>
                  测试数据 <br/>
                  <strong class="big-clr">33℃</strong>
                </div>
              </div>
            </div>

          </div>
          <span class="corner-tl p-a"></span>
          <span class="corner-tr p-a"></span>
          <span class="corner-bl p-a"></span>
          <span class="corner-br p-a"></span>
        </div>
    </div>
    </div>


</body>
<script src="js/vendor/requirejs/require.js"></script>
<script src="js/require.config.js"></script>
<script src="js/app.js"></script>
</html>
